<template>
    <div style="display: flex;">
        <div class="rating_container" :style="{width:starwidth + 'rem',height:starheight+'rem'}">
            <section class="star_container" :style="{width:starwidth + 'rem',height:starheight+'rem'}">
                <svg class="grey_fill" v-for="num in 5" :key="num">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>
                </svg>
            </section>
            <div :style="{width:rating*starwidth/5 + 'rem'}" class="star_overflow">
                <section class="star_container" :style="{width:starwidth + 'rem',height:starheight+'rem'}">
                    <svg class="orange_fill" v-for="num in 5" :key="num">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>
                    </svg>
                </section>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {

            }
        },
        mounted(){

        },
        computed: {

        },
        watch: {

        },
        props: {
            rating: {
                type: Number,
                default: 0
            },
            starwidth: {
                type: Number,
                default: 0.6
            },
            starheight: {
                type: Number,
                default: 0.1
            }
        },
        methods: {

        }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .rating_container {
        position: relative;
        display: flex;
        .star_overflow {
            overflow: hidden;
            position: relative;
            height: 100%;
        }
        .star_container {
            position: absolute;
            display: flex;
            .grey_fill {
                fill: #d1d1d1;
                margin: 0 .03rem;
            }
            .orange_fill {
                fill: #ff9a0d;
                margin: 0 .03rem;
            }
        }
    }
</style>
